// pages/group-buying/haibao/haibao.js
var App = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    loadProgress: 0,
    xianshi:false,
    avatarUrl:'',
    nickName:"",
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var _this = this
    var p = options.p
    var s = JSON.parse(p)
    var params = {
      id: s.i,
       userId: wx.getStorageSync('userId')
    }

    // 二维码请求
    App.HttpService.erweima(params).then(res => {
      wx.showLoading({
        title: '获取二维码...',
        mask: true,
      });
      console.log(res, "res")
      wx.downloadFile({
        url: res.data.data,
        success(res) {
          console.log(res)
          _this.setData({
            erweima: res.tempFilePath
          })
          
          wx.hideLoading();
          _this.ditu();
        }
      })
    })

    this.setData({
      avatarUrl: wx.getStorageSync('ziji').avatarUrl,
      nickName: wx.getStorageSync('ziji').nickName
    })





    // https://mazi2019.aapppp.cn/Public/upload/credit/2019-07-10/5d2548f50459a.png




    // 缓存头像

    // 缓存二维码

    var _this = this
    // setTimeout(function () {
    //   //调用draw()开始绘制
    //   _this.shengcheng();
    // }, 2000)
    this.loadProgress();
  },

  ditu: function() {
    var _this = this
    wx.showLoading({
      title: '获取海报...',
      mask: true,
    });
    // 生成海报所需的底图
    App.HttpService.ditu().then(res => {
      console.log(res, "res")
      wx.downloadFile({
        url: res.data.data.pic,
        success(res) {
          console.log(res)
          _this.setData({
            sss: res.tempFilePath
          })
          wx.hideLoading();
          _this.qingqiutx();
        }
      })
    })

  },
  // 缓存头像
  qingqiutx: function() {
    var _this = this
    wx.downloadFile({
      url: this.data.avatarUrl,
      success: function(res) {
        _this.setData({
          touxiang: res.tempFilePath
        })
      }
    })
  },

  shengcheng: function() {
    var ctx = wx.createCanvasContext('customCanvas')
    var width = ""
    var avaterSrc = this.data.sss
    var touxiang = this.data.touxiang
    var name = this.data.nickName
    var erweima = this.data.erweima
    var text = "长按保存到本地分享"
    wx.createSelectorQuery().select('#canvas-container').boundingClientRect(function(rect) {
      console.log(rect, "view参数")
      var height = rect.height;
      var right = rect.right;
      width = rect.width;
      var left = rect.left - rect.left;
      ctx.setFillStyle('#fff');
      ctx.fillRect(0, 0, rect.width, height);
      // 底图
      if (avaterSrc) {
        // 生成图片     图片     距离左  上     图片大小

        ctx.drawImage(avaterSrc, left, 0, width, height);

        // 设置字号
        // ctx.setFontSize(14);
        // ctx.setFillStyle('#fff');
        // ctx.setTextAlign('left');
      }
      //头像
      if (touxiang) {
        // 靠左边距离  总宽度  减去元素宽度 /2
        var left = rect.width - 100;
        var left = left / 2
        var canvas = ctx
        canvas.fill();
        canvas.save();
        canvas.beginPath() //开始创建一个路径
        canvas.arc(left + 50, 100, 40, 0, 2 * Math.PI, false) //画一个圆形裁剪区域
        canvas.clip() //裁剪
        // 外边圈线
        canvas.stroke();
        canvas.drawImage(touxiang, left, 50, 100, 100) //绘制图片
        canvas.restore() //恢复之前保存的绘图上下文
      }

      if (name) {
        ctx.setFontSize(20) //设置字体大小，默认10
        var s = ctx.measureText(name).width;
        var left = rect.width - s
        var left = (left) / 2
        ctx.setFillStyle('#ffffff') //文字颜色：默认黑色

        ctx.fillText(name, left, 160) //绘制文本

      }


      if (erweima) {

        canvas.drawImage(erweima, left, 250, 100, 100) //绘制图片
      }
      if (text) {
        ctx.setFontSize(15) //设`置字体大小，默认10
        var s = ctx.measureText(text).width;
        var left = rect.width - s
        var left = left / 2
        ctx.setFillStyle('#000') //文字颜色：默认黑色

        ctx.fillText(text, left, 380) //绘制文本

      }


    }).exec()
    setTimeout(function() {
      //调用draw()开始绘制
      ctx.draw();
    }, 1000)

    // ctx.setFillStyle('#5F6FEE') //文字颜色：默认黑色
    // ctx.setFontSize(20) //设置字体大小，默认10
    // ctx.fillText("LXT", 20, 20) //绘制文本
    // ctx.draw()
  },


  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  },
  baocun: function() {
    setTimeout(() => {
      wx.canvasToTempFilePath({
        canvasId: 'customCanvas',
        fileType: "jpg",
        success: (res) => {
          console.log(res)
          var tempFilePath = res.tempFilePath;
          wx.saveImageToPhotosAlbum({
            filePath: tempFilePath,
            success(res) {
              wx.showModal({
                content: '图片已保存到相册，赶紧晒一下吧~',
                showCancel: false,
                confirmText: '好的',
                confirmColor: '#333',
                success: function(res) {
                  console.log(res,11111)
                  if (res.confirm) {}
                },
                fail: function(res) {
                  console.log(res, "6666")
                }
              })
            },
            fail: function(res) {
              console.log(res, "kkk")
              if (res.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
                console.log("打开设置窗口");
                _this.setData({
                  xianshi:true
                })
                // wx.openSetting({
                //   success(settingdata) {
                //     console.log(settingdata,"settingdata")
                //     if (settingdata.authSetting["scope.writePhotosAlbum"]) {
                //       console.log("获取权限成功，再次点击图片保存到相册")
                //     } else {
                //       console.log("获取权限失败")
                //     }
                //   }
                // })
              }
            }

          })
        }
      })
    }, 500)
  },

  // 顶部加载条
  loadProgress() {
    this.setData({
      loadProgress: this.data.loadProgress + 1
    })
    if (this.data.loadProgress < 100) {
      // this.shengcheng();
      setTimeout(() => {
        this.loadProgress();
      }, 45)
      this.shengcheng();
    

    } else {
      this.setData({
        loadProgress: 0
      })
    }
  }
})